<template>
	<div class="components-container">
		<split-pane  split="vertical"  :min-percent='20' :default-percent='20'>
			<template slot="paneL">
				<div class="left-container" style="border-right: 1px solid gainsboro;">
					<fileCategoryList @change="fileCategoryChange" />
				</div>
			</template>
			<template slot="paneR">
				<div class="app-container" >
					<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
						<el-form-item :label="$t('system.fileName')">
							<el-input v-model="searchFrom.fileName" placeholder="文件名称"></el-input>
						</el-form-item>
						<el-form-item v-if="moreSearch" :label="$t('system.fileFcId')">
							<el-select v-model="searchFrom.fileFcId" multiple :placeholder="$t('common.selectTips')">
								<el-option v-for="item in options.fileFcId" :key="item.fcId" :label="item.fcName" :value="item.fcId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-if="moreSearch" :label="$t('system.fileSize')">
							<el-input v-model="searchFrom.fileSize" placeholder="文件大小"></el-input>
						</el-form-item>
						<el-form-item v-if="moreSearch" :label="$t('system.fileSuffix')">
							<el-input v-model="searchFrom.fileSuffix" placeholder="文件后缀"></el-input>
						</el-form-item>
						<el-form-item v-if="moreSearch" :label="$t('system.fileSource')">
							<el-input v-model="searchFrom.fileSource" placeholder="文件来源"></el-input>
						</el-form-item>
						<el-form-item :label="$t('common.more')">
							<el-switch v-model="moreSearch" @change="moreChange">
							</el-switch>
						</el-form-item>
						<el-form-item style="float: right;">
							<el-button type="primary" icon="el-icon-search" @click="getList">{{$t('common.queryBtn')}}</el-button>
							<el-button type="primary" v-permission="'system:file:insert'" @click="addFile"><i class="el-icon-plus" />{{$t('common.addBtn')}}</el-button>
						</el-form-item>
					</el-form>
					<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
						<el-table-column v-for="item in tableColumn" :key="item.field" align="center" :label="item.title" :width="item.width">
							<template slot-scope="{row}">
								<template v-if="item.type == 'select'">
									<span>{{ translation[item.field][row[item.field]] }}</span>
								</template>
								<template>
									<span>{{ row[item.field] }}</span>
								</template>
							</template>
						</el-table-column>
						<el-table-column :label="$t('common.operation')">
							<template slot-scope="scope">
								<el-button v-permission="'system:file:update'" icon="el-icon-edit" type="primary" size="mini" @click="editFile(scope.$index, scope.row)">{{$t('common.editBtn')}}</el-button>
								<el-button v-permission="'system:file:delete'" icon="el-icon-delete" size="mini" type="danger" @click="deleteFile(scope.$index, scope.row)">{{$t('common.delBtn')}}</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="pageSizeChange" @current-change="currentPageChange" :current-page="page.currentPage"
					 :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
					 background>
					</el-pagination>
					<el-dialog width="40%" :title="$t('system.file')" :visible.sync="fileAddFormVisible" center>
						<fileEdit :fileInfo="fileInfo" />
						<span slot="footer" class="dialog-footer">
							<el-button type="danger" icon="el-icon-close" @click="fileAddFormVisible = false">{{$t('common.cancelBtn')}}</el-button>
							<el-button icon="el-icon-check" type="primary" @click="save">{{$t('common.saveBtn')}}</el-button>
						</span>
					</el-dialog>
				</div>
			</template>
		</split-pane>
	</div>

</template>
<script>
	import splitPane from 'vue-splitpane'
	import request from '@/utils/request'
	import permission from '@/directive/permission/index.js' // 权限判断指令
	import fileEdit from '@/views/system/file/file-edit.vue'
	import fileCategoryList from "@/views/system/file-category/file-category-index.vue"
	export default {
		name: 'fileList',
		components: {
			fileEdit,
			splitPane,
			fileCategoryList
		},
		directives: {
			permission
		},
		data() {
			return {
				//更多检索条件
				moreSearch: true,
				//弹窗是否可见
				fileAddFormVisible: false,
				//搜索表单
				searchFrom: {
					fileName: "",
					pageNo: 1,
					pageSize: 10
				},
				//表的下拉数据
				tableList: [],
				//正在编辑的用户信息
				fileInfo: {
					fileName: "",
					fileFcId: "",
					fileSize: "",
					fileSuffix: "",
					fileSource: "",
				},
				//表头
				tableColumn: [{
						field: 'fileName',
						title: this.$t("system.fileName"),
					},
					{
						field: 'fileFcId',
						title: this.$t("system.fileFcId"),
						type: 'select'
					},
					{
						field: 'fileSize',
						title: this.$t("system.fileSize"),
					},
					{
						field: 'fileSuffix',
						title: this.$t("system.fileSuffix"),
					},
					{
						field: 'fileSource',
						title: this.$t("system.fileSource"),
					},
				],
				//数据转译
				translation: {
					fileFcId: {},
				},
				//所有的下拉选项
				options: {
					fileFcId: [],
				},
				//查询方式列表
				listLoading: false,
				//数据列表
				list: null,
				//分页相关参数
				page: {
					pageSizes: [10, 20, 50, 100],
					pageSize: 10,
					total: 0,
					currentPage: 1
				}
			}
		},
		//页面初始化加载
		created() {
			this.getList();
			this.getFileFcId();
		},
		methods: {
			//查询列表
			getList() {
				this.searchFrom['pageNo'] = this.page.currentPage
				this.searchFrom['pageSize'] = this.page.pageSize
				request({
					url: '/system/file/queryByPage',
					method: 'post',
					data: this.searchFrom
				}).then(response => {
					this.list = response.data.list
					this.page.total = response.data.total
					this.page.currentPage = response.data.pageNum
				})
			},
			//保存用户信息
			save() {
				var url = '/system/file/insert';
				if (this.fileInfo.fileId) {
					url = '/system/file/update';
				}
				request({
					url: url,
					method: 'post',
					data: this.fileInfo
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.fileAddFormVisible = false;
				})
			},
			//添加
			addFile() {
				this.fileInfo = {};
				this.fileAddFormVisible = true;
			},
			//编辑
			editFile(index, row) {
				this.fileInfo = {
					fileName: "",
					fileFcId: "",
					fileSize: "",
					fileSuffix: "",
					fileSource: "",
				}
				this.fileInfo = row;
				this.fileAddFormVisible = true;
			},
			//删除用户
			deleteFile(index, row) {
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.confirmDelete(row)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//确认删除操作
			confirmDelete(row) {
				var url = '/system/file/delete';
				request({
					url: url,
					method: 'post',
					data: row
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.fileAddFormVisible = false;
				})
			},
			//分页数量修改
			pageSizeChange(pageSize) {
				this.page.pageSize = pageSize;
				this.getList();
			},
			//页码修改
			currentPageChange(page) {
				this.page.currentPage = page;
				this.getList();
			},
			//更多查询条件
			moreChange() {
				this.searchFrom["fileFcId"] = null;
				this.searchFrom["fileSize"] = null;
				this.searchFrom["fileSuffix"] = null;
				this.searchFrom["fileSource"] = null;
			},
			getFileFcId() {
				request({
					url: '/system/fileCategory/query',
					method: 'post'
				}).then(response => {
					this.options["fileFcId"] = response.data;
					for (var i = 0; i < this.options["fileFcId"].length; i++) {
						this.translation["fileFcId"][this.options["fileFcId"][i].fcId] = this.options["fileFcId"][i].fcName
					}
				})
			},
			fileCategoryChange(checkedNodes){
				debugger
				this.searchFrom.fcIds = "";
				for (var i = 0; i < checkedNodes.length; i++) {
					if (i == 0) {
						this.searchFrom.fcIds = checkedNodes[i].fcId;
					} else {
						this.searchFrom.fcIds += "," + checkedNodes[i].fcId
					}
				}
				this.getList();
			}
		}
	}
</script>
